@charset "utf-8";
@import "reset";
@import "iconfont";
//把px转化为rem的函数
@function r($px){
    @return $px/40*1rem;
}
@mixin aImg{
    overflow: hidden;
    position: relative;
    img{
        position: absolute;
        width: 100%;
        top:-9999px;
        bottom:-9999px;
        left:-9999px;
        right:-9999px;
        margin: auto;
    }
}
.about_web{
    width: 100%;
    height: 100%;
    overflow: hidden;
    //  导航栏
    .about_nav{
        width: 100%;
        height: 30px;
        background: #222;
        border-bottom: 1px solid #222;
        z-index: 9999;
        position: fixed;
        .BG_bg{
            background: #222222;
        }
        .nav_fluid{
            width: 70%;
            height: 30px;   
            .nav_log{
                width: 150px;
                margin-top: -5px;
                img{
                     width: 100%;
                }
            }
            .nav_hone{
                ul{
                    .active{
                        a{
                            background: #111;
                            color: white;
                        }
                    }
                    li{
                        a{
                            font-size: r(16);
                        }
                        a:hover{
                            color: #ccc;
                        }
                        .toggle_bg{
                            background: #222222;
                            li a{
                                background: #222;
                                color: #eee;
                                &:hover{
                                    background: #ccc;
                                    color: #666;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
//  主体
    .about_subject{
        width: 100%;
        margin-top: 50px;
//      头部照片
        .top_pic{
            width: 100%;
            height: r(276);
            @include aImg;
            &:hover{
                background: #fff;
                opacity: .8;
            }
        }
//      公司简介
        .subject_jianjie{
            width: 70%;
            margin: 0 auto;
            margin-top: 50px;
            padding-bottom: 50px;
            .jianjie_left{
                &>div:nth-child(1){
                    h2{
                        color: #2A2A2A;
                        font-size: 30px ;
                    }
                }
                &>div:nth-child(2){
                    margin-top: 20px;
                    p{
                        color: #2A2A2A;
                        font-size:r(20) ;
                    }
                }
                &>div:nth-child(3),&>div:nth-child(4){
                    p{
                        color: #2A2A2A;
                        font-size: r(14);
                        margin-top: 15px;
                        line-height: 20px;
                        text-indent: 20px;
                    }
                }
            }
            .jianjie_right{
                margin-top: 15%;
                div{
                    width: 100%;
                    img{
                        width: 100%;
                    }
                }
                
            }
        }
//      人才招聘
        .recruit_bg{
            background: #8cc11f;
            width: 100%;
            overflow: hidden;
            padding-bottom: 50px;
            .recruit{
                width: 70%;
                margin: 0 auto;
                div>p{
                    color: white;
                }
                &>div:nth-child(1){
                    margin-top: 50px;
                    margin-bottom: 20px;
                    h4{
                        font-size: 25px;
                        color: white;
                    }
                    
                }
                .zhoap{
                    .zhoap_left{
                        div{
                            line-height: 20px;
                            margin-top: 10px;
                            p{
                               font-size: r(14); 
                            }
                        }
                    }
                    .zhoap_right{
                        div{
                            line-height: 20px;
                            margin-top: 10px;
                            p{
                                font-size: r(14); 
                            }
                        }
                        &>div:nth-child(2){
                            width: r(220);
                            height: r(45);
                            border-radius: 2px;
                            background: #fff;
                            text-align: center;
                            line-height: r(45);
                            a{
                                color: #8CC11F;
                                font-size: 18px;
                            }
                            &:hover{
                                background: #eee;
                            }
                        }
                    }
                }
            }
        }
//      引擎开发
        .xinxi{
            width: 70%;
            margin: 0 auto;
            margin-top: 40px;
            padding-bottom: 40px;
            border-bottom: 1px solid #d2d2d2;
            h5{
                color: #8CC11F;
                margin-bottom: 20px;
            }
            p{
                color: #2a2a2a;
                font-size: r(18);
            }
            ul{
                li{
                    color: #2a2a2a;
                    font-size: r(15);
                    text-indent: 20px;
                    line-height: 20px;
                }
            }
        }
//      安卓开发
        .android{
            .xinxix{
                width: 70%;
                margin: 0 auto;
                margin-top: 40px;
                padding-bottom: 40px;
                h5{
                    color: #8CC11F;
                    margin-bottom: 20px;
                }
                p{
                    color: #2a2a2a;
                    font-size: r(18);
                }
                ul{
                    li{
                        color: #2a2a2a;
                        font-size: r(15);
                        text-indent: 20px;
                        line-height: 20px;
                    }
                }
            }
        }
//      联系方式
        .lianxifs_bg{
            background: #f4f4f4;
            width: 100%;
            overflow: hidden;
            padding-bottom: 30px;
            .lianxfs{
                width: 70%;
                margin: 0 auto;
                &>div:nth-child(1){
                    margin-top: 30px;
                    margin-bottom: 20px;
                    p{
                        font-size: 25px;
                    }
                }
                .lians{
                    .lians_left{
                        background: #fff;
                        height: r(100);
                        line-height: r(100);
                        margin-right: 20px;
                        margin-bottom: 10px;
                         &>.row>div:nth-child(1){
                            margin-top: 10px;
                            div{
                                width: r(70);
                                height: r(70);
                                overflow: hidden;
                                img{
                                    width: 100%;
                                    display: block;
                                }
                            }
                        }
                         &>.row>div:nth-child(2){
                            p{
                                font-size: r(15);
                                overflow: hidden;
                                text-overflow:ellipsis ;
                                white-space: nowrap; 
                                
                            }
                        }
                    }
                }
            }
        }
    }
 //   版权
    .about_copy{
        width: 100%;
        height:100px;
        background: #3b3b3b;
        overflow:hidden ;
        position: relative;
        .copy_left{
            width: 70%;
            margin: 0 auto;
            margin-top: r(20);
            .left_son1{
                ul{
                    li{
                        display: inline-block;
                        margin-right: r(15);
                        a{
                            font-size: r(16);
                            color: #a1a3ab;
                            &:hover{
                                color: white;
                            }
                        }
                    }
                }
            }
            .left_son2{
                margin-top: r(15);
                p{
                    font-size: r(16);
                    color: #a1a3ab;
                }
            }
        }
        .copy_right{
            position: absolute;
            right: 18%;
            top: 30%;
            ul{
                li{
                    margin-left: r(10);
                    display: inline-block;
                    div{
                        width: r(40);
                        height: r(40);
                        border-radius:50% ;
                        background: #d8d8e0;
                        line-height:r(40);
                        text-align: center;
                        i{
                            color: #4c4c52;
                            font-size: r(25);
                            display: block;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}
//媒体查询
@media only screen and (max-width:768px){
    .about_web{
        width: 100%;
//      导航栏
        .about_nav{
            width: 100%;
            .nav_fluid{
                width: 100%;
                .navbar-toggle {
                    padding: 5px 5px;
                }
                .nav_log{
                    img{
                        width: 70%;
                    }
                }
            }
        }
//      主体部分
    .about_subject{
            width: 100%;
//          头部照片
            .top_pic{
                width: 100%;
            }
//          公司简介
            .subject_jianjie{
                margin-top: 50px;
                width: 100%;
                .jianjie_left{
                    width: 100%;
                }
                .jianjie_right{
                    width: 60%;
                    div{
                        width: 100%;
                        img{
                            width: 100%;
                        }
                    }
                }
            }
            .recruit_bg{
                width: 100%;
                .recruit{
                    width: 100%;
                    padding-left: 10px;
                    div{
                        width: 90%;
                    }
                }
            }
            .xinxi{
                width: 100%;
                padding-left: 10px;
            }
            .android{
                width: 100%;
                .xinxix{
                    width: 100%;
                    padding-left: 10px;
                }
            }
            .lianxifs_bg{
                width: 100%;
                padding-left: 10px;
                .lianxfs{
                    width: 100%;
                }
                .lians{
                    width: 100%;
                    padding-left: 10px;
                    .lians_left{
                        width: 100%;
                    }
                }
                
            }
        }
//      版权
        .about_copy{
            width: 100%;
            .copy_right{
                display: none;
            }
        }
    }
}